

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}"v=${.Config.basic.version}"v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/add.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <style>
        .border{
            border: 1px solid #ccc;
        }
        .border-right{
            
        }
        .ztree li a {
            cursor: pointer;
            color: #333;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs3">
            <div class="layui-card ">
                <div class="layui-card-header">
                    <span></span>
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <a href="javascript:add();" class="layui-btn layui-btn-normal layui-btn-sm layui-hide action-edit">新增一级菜单</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="tree-div scroll">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs9">
            <div class="layui-card">
                <div class="layui-card-header "><span class="title"></span><a href="javascript:location.reload();" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a></div>
                <div class="layui-card-body">
                    <div class="tree-div scroll">
                        <form class="layui-form " lay-filter="func-form" id="func-form" style="padding: 20px 30px 0 0;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">父页面</label>
                                <div class="layui-input-inline">
                                    <select name="pid" lay-filter="pid" lay-verify="" lay-search="">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">层级</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="level" lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input" disabled>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">ID</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="id" lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">名称(英文)</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name_en" lay-verify="" placeholder="请输入名称(英文)" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="" class="layui-form-label">图标</label>
                                <div class="layui-input-block">
                                    <input name="icon" type="text" id="iconPicker" value="layui-icon-component" lay-filter="iconPicker" class="hide">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">URL路径</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="url" lay-verify="" placeholder="URL路径" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">一级菜单不填</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-block">
                                    <input type="checkbox"  name="type" lay-skin="switch" lay-filter="switch-type" lay-text="菜单页面|内嵌页面" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="order" lay-verify="required|number" placeholder="排序号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-tips layui-text-red" lay-tips="注意:越小优先级越高 范围0-999" lay-offset="5"></i></div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">缺省页面</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox"  name="default_select" lay-skin="primary" lay-filter="switch-type" title="" >
                                </div>
                                <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-tips layui-text-red" lay-tips="注意:设置后系统进入的时候默认将打开此页面" lay-offset="5"></i></div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">功能操作</label>
                                <div class="layui-input-block" id="check_actions">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn layui-btn-normal action-edit layui-hide hide" lay-submit="" lay-filter="btn_save" id="btn_save">保存</button>
                                    <button type="submit" class="layui-btn layui-btn-normal action-edit layui-hide hide" lay-submit="" lay-filter="btn_add" id="btn_add">新增</button>
                                    <button type="reset" id="btn_cancel" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>



<script src="../plugins/layui/layui.js"></script>
<script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.core.min.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.excheck.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.exedit.js?v=${.Config.basic.version}"></script>
<script>
    var zTree=null;
    var table=null;
    var form=null;
    var iconPicker =null;
    var Table=null;
    var actions=null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var func_url="${.func_url}";
    var actions=[];
    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','iconPicker'], function(){
        $ = layui.$;
        form = layui.form;
        table = layui.table;

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        iconPicker = layui.iconPicker;
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
            },
            // 渲染成功后的回调
            success: function(d) {
            }
        });

        var tree_setting = {
            view: {
                dblClickExpand: false,
                fontCss: getFont,
                nameIsHTML: true,
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
            },
            callback: {
                onClick: treeOnClick
            },
            edit: {
                enable: false,
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid',
                    rootPId: null
                }
            }
        };
        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }

        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' nodeid='"+treeNode.tId+"' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";

            var removeStr = "<span class='button remove' nodeid='"+treeNode.tId+"' id='removeBtn_" + treeNode.tId
                + "' title='remove node' onfocus='this.blur();'></span>";
            sObj.after(removeStr);
            sObj.after(addStr);

            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(event){
                var tid=$(this).attr("nodeid");
                var node = zTree.getNodeByTId(tid);
                if(node.level>=2){
                    layer.alert("无法在继续在第三级面再添加子页面，请在上一级添加。")
                    return false;
                }

                $("input[name='id']").removeAttr("disabled");
                $('#btn_add').removeClass("hide");
                $('#btn_save').addClass("hide");

                $("#btn_cancel").click();
                $('.title').html("新增");
                //console.info(node);

                form.val("func-form", {
                    pid:node.id,
                    level:node.level+1
                });

                return false;
            });
            btn = $("#removeBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(event){
                var tid=$(this).attr("nodeid");
                var node = zTree.getNodeByTId(tid);
                layer.confirm('确认删除'+node.name+"?", function(index){
                    layer.close(index);
                    $.ajax({
                        type: 'DELETE',
                        url: '../Api/Func',
                        data: {rid:node.id},
                        beforeSend: function(request) {
                            request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                        },
                        dataType: "json",
                        success: function (data) {
                            //console.info(data)
                            if(data.code>=0){
                                layer.msg('删除成功');
                                window.location.reload();
                            }else{
                                layer.alert('删除失败:'+data.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert('删除失败');
                        }
                    });
                });

                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
            $("#editBtn_"+treeNode.tId).unbind().remove();
            $("#removeBtn_"+treeNode.tId).unbind().remove();
        };
        function treeOnClick(event, treeId, treeNode) {
            //编辑模式
            $("input[name='id']").attr("disabled","");
            $('#btn_add').addClass("hide");
            $('#btn_save').removeClass("hide");
            $.ajax({
                type: 'GET',
                url: '../Api/Func',
                data: {rid:treeNode.id},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data);
                    if(data.data.length>0){
                        var obj={};
                        obj['id']=data.data[0].id;
                        obj['pid']=data.data[0].pid;
                        obj['name']=data.data[0].name;
                        obj['name_en']=data.data[0].name_en;
                        obj['icon']=data.data[0].icon||'';
                        obj['url']=data.data[0].url;
                        obj['type']=data.data[0].type==0?true:false;
                        obj['order']=data.data[0].order;
                        obj['level']=data.data[0].level;
                        obj['default_select']=data.data[0].default_select==1?true:false;

                        //全部action不勾选
                        for(var i=0;i<actions.length;i++){
                            var name="action["+actions[i].id+"]";
                            obj[name]=false;
                        }
                        if(data.data[0].action_ids){
                            var action_ids=data.data[0].action_ids.split(',');
                            for(var i=0;i<action_ids.length;i++){
                                var name="action["+action_ids[i]+"]";
                                obj[name]=true;
                            }
                        }

                        //console.info(obj);
                        $('.title').html("修改 【"+obj.name+"】");
                        form.val("func-form", obj);
                        iconPicker.checkIcon('iconPicker', obj.icon);
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                }

            });
        }
        //监听提交
        form.on('submit(btn_save)', function(data){
            var field = data.field; //获取提交的字段
            if(field.default_select=='on'){
                field.default_select=1;
            }else{
                field.default_select=0;
            }
            if(field.type=='on'){
                field.type=0;
            }else{
                field.type=1;
            }

            $.ajax({
                type: 'PUT',
                url: '../Api/Func',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
            return false;
        });
        form.on('submit(btn_add)', function(data){
            var field = data.field; //获取提交的字段
            console.info(field);
            if(field.default_select=='on'){
                field.default_select=1;
            }else{
                field.default_select=0;
            }
            if(field.type=='on'){
                field.type=0;
            }else{
                field.type=1;
            }
            $.ajax({
                type: 'POST',
                url: '../Api/Func',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                        window.location.reload();
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
            return false;
        });

        $.ajax({
            type: 'GET',
            url: '../Api/Action',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                actions=data.data;
                //action 初始化
                var html="";
                for(var i=0;i<actions.length;i++){
                    html+="<input type=\"checkbox\" name=\"action["+actions[i].id+"]\" title=\""+actions[i].name+"\" >";
                }
                $("#check_actions").html(html);
                form.render('checkbox');
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载信息失败');
            }

        });

        $.ajax({
            type: 'GET',
            url: '../Api/Func',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                for(var i=0;i<data.data.length;i++){
                    if(data.data[i].type==0){
                        data.data[i]["icon"]="../plugins/zTree/css/metroStyle/img/html.png";
                    }else{
                        data.data[i]["icon"]="../plugins/zTree/css/metroStyle/img/iframe.png";
                    }
                    data.data[i]['url']="";
                }
                zTree = $.fn.zTree.init($("#treeDemo"), tree_setting, data.data);
                zTree.expandAll(true);
                //下拉框
                var funcs=data.data;
                var html="<option value=\"\">选择</option>";
                for(var i=0;i<funcs.length;i++){
                    if(funcs[i].level<2){
                        html+="<option value=\""+funcs[i].id+"\">"+funcs[i].name+"</option>";
                    }
                }
                $("select[name='pid']").html(html);
                form.render('select');
                form.on('select(pid)', function(data){
                    for(var i=0;i<funcs.length;i++){
                        if(funcs[i].id==data.value){
                            form.val("func-form", {level:funcs[i].level});break;
                        }
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载信息失败');
            }

        });

        resizeElement();
    });

    function add(){
        $("input[name='id']").removeAttr("disabled");
        $('#btn_add').removeClass("hide");
        $('#btn_save').addClass("hide");

        $("#btn_cancel").click();
        $('.title').html("新增");
        form.val("func-form", {
            pid:'',
            level:0
        });
        layer.alert("已经进入新增模式，点击[新增]按钮保存");
    }

    $(window).resize(function () {
        //console.info('resize')
        resizeElement();
    });
    function resizeElement() {
        $('.tree-div').height($(window).height()-105);
    }

</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>
</html>

